<template>
    <div class="article-type-edit">
        <div class="article-type-edit-card">
            <Form ref="formArticleData" :model="formArticleData" :rules="ruleArticleData" :label-width="80">
                <FormItem label="是否显示">
                    <i-switch v-model="formArticleData.switch" size="large">
                        <span slot="open">显示</span>
                        <span slot="close">隐藏</span>
                    </i-switch>
                </FormItem>
                <FormItem label="分类名称" prop="title">
                    <Input v-model="formArticleData.title" placeholder="请输入分类名称"></Input>
                </FormItem>
                <FormItem label="排序号"  prop="num">
                    <Input number v-model="formArticleData.num" placeholder="请输入排序号"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit">提交</Button>
                    <Button type="ghost" @click="handleReset" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    export default {
        name:"article-type-edit",
        data(){
            const validateNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('排序号不能为空'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return{
                formArticleData:{
                    title:"",
                    switch:true,//默认显示
                    num:"",
                },
                ruleArticleData:{
                    title: [
                        { required: true, message: '分类名不能为空', trigger: 'blur' }
                    ],
                    num: [
                        { validator: validateNum, trigger: 'blur' }
                    ]
                },
            }
        },
        mounted(){
            if(this.$route.query.isEdit){
                this.getOneType()
            }
        },
        methods:{
            getOneType(){
                this.getJsonData("Articletype/queryOne",{catId:this.$route.query.id})
                    .then((res)=>{
                        this.formArticleData.title=res.data.catname
                        this.formArticleData.switch=res.data.isshow==1?true:false
                        this.formArticleData.num=parseFloat(res.data.catsort)
                    })
            },
            handleSubmit () {
                this.$refs.formArticleData.validate((valid) => {
                    if (valid) {
                        if(this.$route.query.isEdit){
                            //编辑方法
                            this.$Loading.start();
                            this.getJsonData("Articletype/changeArticle",{
                                catId:this.$route.query.id,
                                catName:this.formArticleData.title,
                                catSort:this.formArticleData.num,
                                isShow:this.formArticleData.switch?1:-1,
                            })
                                .then((res)=>{
                                    this.$Message.success("修改成功")
                                })
                        }else{
                            //新增方法
                            this.$Loading.start();
                            this.getJsonData("Articletype/addArticleType",{
                                catName:this.formArticleData.title,
                                catSort:this.formArticleData.num,
                                isShow:this.formArticleData.switch?1:-1,
                            })
                                .then((res)=>{
                                    this.$Message.success("新增成功")
                                })
                        }
                    }
                })
            },
            //重置
            handleReset () {
                this.$refs.formArticleData.resetFields();
            },
        }
    }
</script>
<style lang="less">
    @import "./article-type-edit";
</style>